<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <template id="t1">
      <div>
        <h2>num</h2>
        {{rnum}}
        <hr />
        {{rnum}}

        <hr />

        <h2>age</h2>
        {{setAge()}}
        <hr />
        {{setAge()}}
        <hr />
        {{setAge()}}
      </div>
    </template>
    <script src="./vue.js"></script>
    <script>
      /*
        1. computed 会将第一次调用的结果缓存，后续调用不会重新计算，会去读取第一次缓存的值 
        2. methods  每次都会重新调用执行
        3. 如果计算属性的依赖项发生变化，计算属性重新计算
        4. 因为需要同步返回值，所以不会再计算属性中写异步代码。
      */
      const vm = new Vue({
        el: "#app",
        template: "#t1",
        data: {
          num: 10,
          age: 20,
        },
        computed: {
          rnum() {
            return this.num + Math.random();
          },
        },
        methods: {
          setAge() {
            return this.age + Math.random();
          },
        },
      });
    </script>
  </body>
</html>
